<template>
  <div class="form-field">
    <div class="form-item" v-for="(item,v) in form" :key="item.id" :index="v">
      <div class="name" :style="{color:app_tabBar.config.firstcolor}">
        <div class="require" v-if="item.wr_ok==='1'">*</div>
        {{item.name}}
      </div>
      <input class="form-input" :value="item.value" @input="item.value = $event.target.value" type="text" v-if="item.type==='1'" :name="'para'+item.id">
      <input class="form-input" :value="item.value" @input="item.value = $event.target.value" @blur="inputNum($event.target.value)" type="text" v-if="item.type==='8'" :name="'para'+item.id">
      <input class="form-input" :value="item.value" @input="item.value = $event.target.value" @blur="inputEmail($event.target.value)" type="text" v-if="item.type==='9'" :name="'para'+item.id">
      <div class="picker" v-if="item.type==='2'">
        <popup-picker  :data="item.list" v-model="item.value" :columns="1"></popup-picker>
        <i class="fa fa-angle-down"></i>
      </div>
      <Checklist class="radio-group" v-if="item.type==='6'" :name="'para'+item.id" :max="1" :options="item.list" @checklist-icon-active-color="app_tabBar.config.firstcolor" v-model="item.value">
      </Checklist>
      <Checklist class="checkbox-group" v-if="item.type==='4'" :name="'para'+item.id" :options="item.list" v-model="item.value">
      </Checklist>
      <textarea class="form-textarea" v-if="item.type==='3'" :value="item.value" @input="item.value = $event.target.value" :name="'para'+item.id"></textarea>
    </div>
    <div class="form-item">
      <button @click="handleSubmit" class="form-btn" :style="{backgroundColor:app_tabBar.config.thirdcolor}">提交</button>
    </div>
    <message :data="Message" @reset="reset"></message>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { validatePhoneNumber, validateEmail, validateForm } from '@/utils/index'
import Message from '@/components/Message'
import { Checklist, XButton, PopupPicker, Toast } from 'vux'
export default {
  components: { Checklist, XButton, PopupPicker, Message, Toast },
  props: {
    form: Array
  },
  mounted() {},
  computed: {
    ...mapGetters(['feedback', 'app_tabBar'])
  },
  data() {
    return {
      validate: false,
      Message: {},
      value: {}
    }
  },
  methods: {
    reset(){
      this.Message={}
    },
    inputNum(e) {
      if (!validatePhoneNumber(e))
        this.Message = {
          content: '请输入正确的电话号码',
          type: 'error'
        }

    },
    inputEmail(e) {
      if (!validateEmail(e))
        this.Message = {
          content: '请输入正确的邮箱地址',
          type: 'error'
        }

    },
    pickerChange(e, item) {
      const val = item.list[e.mp.detail.value]
      item.index = e.mp.detail.value
    },
    handleSubmit() {
      if (validateForm(this.value, this)) {
        this.$vux.loading.show({
          text: '提交中'
        })
        this.value.module = this.form[0].module
        let funName
        if (this.value.module === '8') {
         this.value.column_id = this.feedback.column_id
          this.value.name = this.feedback.name
          funName = 'SubmitFeedback'
        } else {
          funName = 'SubmitMessage'
        }
        this.$store.dispatch(funName, this.value).then(response => {
          if (response.status === 200) {
            this.$vux.toast.show({
              text: response.data,
              type: 'success'
            })
            setTimeout(() => {
              this.$vux.loading.hide()
              this.$router.push('/home/index')
            }, 2300)
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.form-field {
  .checkbox,
  .radio {
    margin-right: 15px;
  }
  ._checkbox,
  ._radio {
    margin-bottom: 15px;
  }
  .picker {
    position: relative;
    .title {
      margin-bottom: 10px;
    }
    .picked {
      border: 1px solid #dcdcdc;
      color: #76838f;
      padding: 6px 15px;
      line-height: 1.571429;
      font-size: 14px;
      height: 40px;
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
    .fa {
      position: absolute;
      right: 15px;
      top: 11px;
      font-size: 20px;
      color: #76838f;
    }
  }
  .require {
    color: #ed3f14;
  }
  .form-item {
    margin-bottom: 20px;
    .name {
      display: flex;
      margin-bottom: 10px;
      .require {
        color: #ed3f14;
        margin-right: 8px;
      }
    }
  }
}
</style>
